<script src="${base}/dist/js/3dtag.js"></script>

<style> 
.list li a {
	margin-left:0px;
	transition:margin-left 0.5s;
	-moz-transition:margin-left 0.5s; /* Firefox 4 */
	-webkit-transition:margin-left 0.5s; /* Safari and Chrome */
	-o-transition:margin-left 0.5s; /* Opera */
}

.list li a:hover {
	margin-left:15px;
}

.li-level {
	background: #ccc;
    font-size: 12px;
    color: #fff;
    line-height: 180%;
    margin: 0 5px 0 0;
    padding: 0 5px;
    border-radius: 2px;
}


.li-level-1 {
    background: #f54545;
}
.li-level-2 {
    background: #ff8547;
}
.li-level-3 {
    background: #ffac38;
}
</style>

<div class="panel panel-default widget">
	<div class="panel-heading">
		<h3 class="panel-title"><i class="fab fa-hotjar"></i> 热门文章</h3>
	</div>
	<div class="panel-body">
		<@sidebar method="hottest_posts">
		<ul class="list">
			<#list results as row>
            <li><span class="li-level li-level-${row_index + 1}">${row_index + 1}</span><a href="${base}/post/${row.id}">${row.title}</a></li>
			</#list>
		</ul>
		</@sidebar>
	</div>
</div>

<style>
#tag_cloud_widget {
	position: relative;
	width: 100%;
	height: 200px;
	overflow: hidden;
	margin: 10px auto 10px
}

#tag_cloud_widget a {
	position: absolute;
	color: #fff;
	text-align: center;
	text-overflow: ellipsis;
	white-space: nowrap;
	top: 0;
	left: 0;
	padding: 3px 5px;
	box-shadow: 0 1px 1px rgba(0, 0, 0, .08)
}

#tag_cloud_widget a:hover {
	background: #d02f53;
	display: block
}

#tag_cloud_widget a:nth-child(n) {
	background: #666;
	border-radius: 3px;
	display: inline-block;
	line-height: 18px;
	margin: 0 10px 15px 0
}

#tag_cloud_widget a:nth-child(n) {
	white-space: nowrap;
	_white-space: normal;
	*white-space: normal;
	overflow: hidden;
	text-overflow: ellipsis
}

#tag_cloud_widget a:nth-child(2n) {
	background: #d1a601
}

#tag_cloud_widget a:nth-child(3n) {
	background: #286c4a
}

#tag_cloud_widget a:nth-child(5n) {
	background: #518ab2
}

#tag_cloud_widget a:nth-child(4n) {
	background: #c91d13
}

#tag_cloud_widget a {
	line-height: 15px;
	background: #999
}
</style>

<div class="panel panel-default widget">
	<div class="panel-heading">
		<h3 class="panel-title"><i class="fas fa-tags"></i> 热门标签</h3>
	</div>
	<div class="panel-body" id="tag_cloud_widget">
		<@sidebar method="tags">
			<#list results as row>
				<a href="${base}/tag/${row.name}/" class="tag-cloud-link">${row.name}</a>
			</#list>
		</@sidebar>
		<div class="clear"></div>
	</div>
</div>

<div class="panel panel-default widget">
	<div class="panel-heading">
		<h3 class="panel-title"><i class="fas fa-external-link-alt"></i> 最新发布</h3>
	</div>
	<div class="panel-body">
		<@sidebar method="latest_posts">
			<ul class="list">
				<#list results as row>
					<li><span class="li-level li-level-${row_index + 1}">${row_index + 1}</span><a href="${base}/post/${row.id}">${row.title}</a></li>
				</#list>
			</ul>
		</@sidebar>
	</div>
</div>

<@controls name="comment">
<div class="panel panel-default widget">
    <div class="panel-heading">
        <h3 class="panel-title"><i class="fas fa-comment-dots"></i> 最新评论</h3>
    </div>
    <div class="panel-body">
		<@sidebar method="latest_comments">
			<ul class="list">
				<#list results as row>
					<#if row.pid == 0>
						<li><a href="${base}/comment">${(row.content)?replace('&lt;','<')?replace('&gt;','>')}</a></li>
					<#else>
						<li><a href="${base}/post/${row.postId}">${row.content}</a></li>
					</#if>
				</#list>
			</ul>
		</@sidebar>
    </div>
</div>
</@controls>